import { GraphicsGroupItem } from "@/config/graphicsGroup.ts";
import { Collapse } from "antd";
import { FolderOutlined } from "@ant-design/icons";
import React from "react";
import styles from "@/layout/Graphics/Graphics.module.scss";
import { deepClone } from "@meta2d/core";
interface Props {
  item: GraphicsGroupItem;
}
function BuiltCom({ item }: Props) {
  const dragStart = (e: React.MouseEvent<HTMLDivElement>, elem: any) => {
    if (!elem) {
      return;
    }
    e.stopPropagation();
    // 拖拽事件
    if (e instanceof DragEvent) {
      // 设置拖拽数据
      e.dataTransfer?.setData("Meta2d", JSON.stringify(elem.data));
    } else {
      // 支持单击添加图元。平板模式
      window.meta2d.canvas.addCaches = deepClone([elem.data]);
    }
  };

  return (
    <>
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        expandIconPosition={"end"}
        items={[
          {
            key: "panel",
            label: (
              <>
                <FolderOutlined style={{ marginRight: 5 }} />
                {`${item.key} (${item.list?.length || "0"})`}
              </>
            ),
            children: (
              <div className={styles.GraphicsItem}>
                {item.list &&
                  item.list.map((_listItem, index) => {
                    return (
                      <div
                        draggable={true}
                        key={_listItem.name + index + ""}
                        title={_listItem.name}
                        className="item"
                        onDragStart={(event) => dragStart(event, _listItem)}
                        onClick={(event) => dragStart(event, _listItem)}
                      >
                        <svg
                          className="l-icon"
                          style={{ width: "2em", height: "2em" }}
                          aria-hidden="true"
                        >
                          <use xlinkHref={"#" + _listItem.icon}></use>
                        </svg>
                      </div>
                    );
                  })}
              </div>
            ),
            style: {
              borderRadius: 0,
            },
          },
        ]}
      ></Collapse>
    </>
  );
}
export default React.memo(BuiltCom);
